<template>
    <div class="activity-index">
    	<el-form :inline="true" >
          <el-form-item label="用户名">
            <el-input  placeholder="请输入用户名" v-model="name"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input  placeholder="请输入手机号" v-model="phone"></el-input>
          </el-form-item>
					<el-form-item label="宿舍号">
						<el-input  placeholder="请输入宿舍号" v-model="dormNumber"></el-input>
					</el-form-item>
          <el-form-item label="用户类型">
						<!-- -1拉黑 0普通 1中级 2高级 3管理员 4超级管理员 -->
            <el-select  placeholder="请输选择用户类型" v-model="status">
							<el-option label="请输选择用户类型" value=""></el-option>
              <el-option label="拉黑" value="-1"></el-option>
							<el-option label="普通" value="0"></el-option>
              <el-option label="中级" value="1"></el-option>
							<el-option label="高级" value="2"></el-option>
							<el-option label="管理员" value="3"></el-option>
							<el-option label="超级管理员" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="query">
              <el-button type="primary" @click="queryUsers">查询</el-button>
        </div>
        <el-table :data="userList" style="width: 100%">
            <el-table-column label="#" 
                             type="index"
                            :index="indexStart">
            </el-table-column>
            <el-table-column label="姓名" prop="name">
            </el-table-column>
            <el-table-column label="手机号码" prop="phone">
            </el-table-column>
						<el-table-column label="宿舍号" prop="dormNumber">
						</el-table-column>
            <el-table-column label="身份" prop="statusStr">
            </el-table-column>
						<el-table-column label="推广数" prop="extendNumber">
						</el-table-column>
            <el-table-column label="创建时间" prop="createDate">
            </el-table-column>
            <el-table-column label="操作" prop="desc" width="100">
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="showUserDetailModel(scope.$index, scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pages">
            <el-pagination
              background
              @size-change="pageSizeChange"
              @current-change="pageCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
				
				<!-- 查看用户详细 -->
				<el-dialog
					title="用户详细"
					:visible.sync="userDetailModel"
					width="30%"
					:before-close="handleCloseorderUserDetailModel"
					v-if="obj!=null">
					<el-form label-position="left" label-width="80px" >
						<el-form-item label="姓名">
							<el-input v-model="obj.name" ></el-input>
						</el-form-item>
						<el-form-item label="手机号">
							<el-input v-model="obj.phone"></el-input>
						</el-form-item>
						<el-form-item label="寝室号">
							<el-input v-model="obj.dormNumber"></el-input>
						</el-form-item>
						<el-form-item label="身份">
							<el-select  placeholder="请输选择用户类型" v-model="obj.statusStr" :value="obj.statusStr">
								<el-option label="请输选择用户类型" value=""></el-option>
								<el-option label="拉黑" value="-1"></el-option>
								<el-option label="普通" value="0"></el-option>
								<el-option label="中级" value="1"></el-option>
								<el-option label="高级" value="2"></el-option>
								<el-option label="管理员" value="3"></el-option>
								<el-option label="超级管理员" value="4"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="推广数">
							<el-input v-model="obj.extendNumber" disabled></el-input>
						</el-form-item>
						<el-form-item label="申请时间">
							<el-input v-model="obj.createDate" disabled></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="updateUser">修 改</el-button>
					</span>
				</el-dialog>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'NoticeComponent',
    props: {

    },
    data() {
        return {
            userList: [],
						obj: null,
						pageNum:1,
						pageSize:10,
						
						name:'',
						phone: '',
						dormNumber: '',
						status:'',
						
						total:0,
						
						userDetailModel:false,
        }
    },
		created:function(){
			this._getUserList()
		},
		computed: {
			indexStart() {
				return this.pageNum*this.pageSize - this.pageSize+1
			}
		},
    methods: {
			_getUserList() {
				this.axios.get('/admin/user/list?pageNum='+this.pageNum+'&pageSize='+this.pageSize
											+'&status='+this.status+'&name='+this.name+'&phone='+this.phone+'&dormNumber='+this.dormNumber
											)
				.then((res)=>{
					let data = res.data.data
					this.userList = data.list
					this.total = data.total
					console.log(data)
				})
			},
      showUserDetailModel(index,obj) {
				this.obj = obj
				this.userDetailModel = true
      },
			pageSizeChange(pageSize) {
				this.pageNum = 1
				this.pageSize = pageSize
				this._getUserList()
			},
			pageCurrentChange(pageNum) {
				this.pageNum = pageNum
				this._getUserList()
			},
			queryUsers() {
				this.pageNum = 1
				this._getUserList()
			},
			handleCloseorderUserDetailModel() {
				this.userDetailModel = false
			},
			// 更新用户详细
			updateUser() {
				// <!-- -1拉黑 0普通 1中级 2高级 3管理员 4超级管理员 -->
				let arr = ["拉黑","普通","中级","高级","管理员","超级管理员",]
				this.axios.get('/admin/user/updatsUser?userId='+this.obj.userId+'&phone='+this.obj.phone
											+'&dormNumber='+this.obj.dormNumber+'&status='+this.obj.statusStr+'&name='+this.obj.name)
					.then((res)=>{
						if(res.data.status==200) {
							this.$notify({
								title: '修改成功',
								message: '用户信息已更新',
								type: 'success'
							});
							this.userDetailModel=false
							this.obj.status=this.obj.statusStr
							this.obj.statusStr = arr[parseInt(this.obj.statusStr)+1]
						}else {
							this.$notify({
								title: '修改失败',
								message: res.data.message,
								type: 'error'
							});
						}
					})
			}
    }
}
</script>
<style scoped lang="styl">
.info
  display flex
  justify-conent center
  flex-direction column

 .info .img{
  width: 80px;
  height: 80px;
 }
.query
    display flex
    justify-content flex-end
    margin 0 58px 20px 0 
.pages
    display flex
    justify-content flex-end
    margin-top 20px
</style>